<template>
  <!-- 修改手机号码 -->
  <uni-popup ref="modifyMobile">
    <uni-popup-dialog
        type="info"
        cancelText="取消"
        confirmText="确认"
        title="修改手机号码"
        @close="cancel"
        @confirm="submitForm"
        before-close>
      <template v-slot="content">
        <uni-notice-bar single color="#00a660" background-color="#ffffff" text="请填写新的手机号码，并进行短信验证。"/>
        <uni-forms
            ref="form"
            :modelValue="form"
            :rules="rules"
            :label-width="70" type="line" label-align="right"
            class="paddingAll">
          <uni-forms-item label="真实姓名">
            <uni-easyinput v-model="user.name" disabled/>
          </uni-forms-item>
          <uni-forms-item label="证件号码">
            <uni-easyinput v-model="user.idNumber" disabled/>
          </uni-forms-item>
          <uni-forms-item label="新手机号" name="newMobile" required>
            <uni-easyinput placeholder="请输入新的手机号码" maxlength="11" v-model="form.newMobile"/>
          </uni-forms-item>
          <uni-forms-item label="验证码" name="smsCode" required>
            <view class="smscode_flex">
              <uni-easyinput placeholder="请输入短信验证码" type="number" maxlength="6" v-model="form.smsCode"></uni-easyinput>
              <button class="code_btn" :loading="getSmsLoading" @click="toVerifyMobile(9)" v-if="showCode">
                {{ counter }}
              </button>
              <button class="code_graybtn" v-else>{{ counter }}</button>
            </view>
          </uni-forms-item>
          <view class="sounds-text" v-show="voiceShow" @click="toVerifyMobile(109)">收不到短信？获取语音验证码</view>
        </uni-forms>
      </template>
    </uni-popup-dialog>
  </uni-popup>
</template>

<script>

import {checkMobileUnique, toGetSmsCode, updateMobile} from "@/api/ec/person/user/userInfo";

export default {
  props: {},
  data() {
    return {
      // 验证码按钮显示
      showCode: true,
      // 获取验证码文字
      counter: '获取验证码',
      // 短信验证码按钮获取加载中
      getSmsLoading: false,
      // 获取语音验证码是否显示
      voiceShow: false,

      // 是否显示弹出层
      open: false,
      // 用户信息
      user: {},
      // 表单
      form: {
        newMobile: null,
        smsCode: null
      },
      // 表单校验
      rules: {
        newMobile: {
          rules: [
            {required: true, errorMessage: '请输入正确的手机号码'},
            {pattern: /^1[3456789]\d{9}$/, message: '请输入正确的手机号码'}
          ]
        },
        smsCode: {
          rules: [
            {required: true, errorMessage: '请输入6位数字短信验证码'},
            {pattern: /^[0-9]*$/, message: '请输入6位数字短信验证码'}
          ]
        },
      },
    };
  },
  methods: {
    /** 打开弹出框 */
    toOpenDialog(user) {
      this.user = user;
      this.toModifyMobile();
    },
    /** 取消按钮 */
    cancel() {
      this.$refs.modifyMobile.close()
    },
    /** 修改手机号码弹出框 */
    toModifyMobile() {
      this.form = {newMobile: "", smsCode: "",};
      this.$refs.modifyMobile.open('center')
    },
    /** 获取新手机短息验证码前验证手机号码 */
    toVerifyMobile(smsType) {
      let mobile = this.form.newMobile;
      if (mobile == null || mobile == "") {
        this.$modal.msgError("请输入新手机号码");
        return;
      }
      if (!(/^1[3456789]\d{9}$/.test(mobile))) {
        this.$modal.msgError("请输入正确的手机号码");
        return;
      }
      const param = {mobile: mobile}
      this.getSmsLoading = true;
      checkMobileUnique(param).then(response => {
        this.getSmsCode(smsType);
      }).catch(() => {
        this.getSmsLoading = false;
      });
    },
    /** 获取新手机短息验证码前验证手机号码 */
    getSmsCode(smsType) {
      let mobile = this.form.newMobile;
      const param = {mobile, smsType}
      this.getSmsLoading = true;
      toGetSmsCode(param).then(response => {
        this.getSmsLoading = false;
        this.$modal.msgSuccess("短信验证码已发送到您手机，请注意查收");
        // 倒计时处理
        this.showCode = false
        this.counter = this.$smsCounter;
        const timer = setInterval(() => {
          this.counter--;
          if (this.counter <= 0) {
            this.showCode = true
            this.counter = '重新发送';
            this.voiceShow = true;
            clearInterval(timer);
          }
        }, 1000);
      });
    },
    /** 修改手机号码弹出框,确定按钮 */
    submitForm() {
      this.$refs.form.validate().then(valid => {
        if (valid) {
          this.$modal.loading();
          const param = {newMobile: this.form.newMobile, smsCode: this.form.smsCode}
          updateMobile(param).then(response => {
            uni.hideLoading()
            this.cancel();
            this.$emit("success", "");
            this.$modal.msgSuccess("手机号码修改成功！");
          }).catch(() => {
            uni.hideLoading()
          });
        }
      });
    },
  }
};
</script>
<style scoped lang="scss">
::v-deep .uni-forms-item .is-required {
  display: none;
}

::v-deep .uni-popup-dialog {
  width: 85%;
}

::v-deep .uni-dialog-content {
  padding: 26rpx;
}

.smscode_flex {
  display: flex;
  align-items: center;
  position: relative;
  .code_btn {
    background: #fff;
    color: $uni-color-primary;
    padding: 0;
    width: 170rpx;
    font-size: 26rpx;
    position: absolute;
   // top: 2rpx;
   right: 10rpx;
   height: 63rpx;
   // line-height: 62rpx;
   line-height: 63rpx;
  }

  .code_graybtn {
    background: #fff;
    color: $uni-color-primary;
    padding: 4rpx 0;
    width: 70rpx;
    font-size: 26rpx;
    position: absolute;
   // top: 2rpx;
   right: 10rpx;
   height: 63rpx;
   // line-height: 62rpx;
   line-height: 63rpx;
  }
}

.sounds-text {
  margin-top: 3px;
  color: $uni-color-primary;
  text-align: right;
  font-size: 13px;
  cursor: pointer;
}
</style>
